<template>
  <div class="user-center-layout">
    <!-- 顶部导航 -->
    <div class="page-header">
      <a-button type="link" class="back-btn" @click="$router.back()">
        <a-icon type="left" />返回
      </a-button>
      <span class="title">{{ title }}</span>
      <div class="placeholder"></div>
    </div>

    <!-- 内容区 -->
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserCenterLayout',
  data() {
    return {
      title: ''
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        // 根据路由设置标题
        const titleMap = {
          'UserProfile': '个人信息',
          'AccountInfo': '账号设置',
          'SecuritySettings': '安全设置',
          'Withdraw': '提现',
          'PaymentSettings': '支付设置',
          'WithdrawList': '提现记录',
          'Team': '我的团队',
          'ConsumptionList': '消费记录',
          'DistributorApply': '申请分销商'
        }
        this.title = titleMap[route.name] || ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.user-center-layout {
  height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;

  .page-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #262626;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .back-btn {
      padding: 0;
      color: #1890ff;
    }

    .placeholder {
      width: 40px; // 与返回按钮宽度相同，保持对称
    }
  }

  .content {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    background: #f5f7fa;
  }
}

@media screen and (max-width: 768px) {
  .user-center-layout {
    .page-header {
      padding: 8px 12px;
      
      .title {
        font-size: 14px;
      }

      .placeholder {
        width: 32px;
      }
    }

    .content {
      padding: 8px;
    }
  }
}
</style> 